<!--
 * @Author: zhangmengqiong
 * @Date: 2021-05-13 16:46:42
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-05-13 17:39:30
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3D建筑</title>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=DVPI4kwxgMqXDrTx483rHkB7c3KDRyPp"
    ></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <script
      type="text/javascript"
      src="https://mapv.baidu.com/build/mapv.js"
    ></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #map_container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map_container"></div>
    <script type="text/javascript">
      var map = initMap({
        tilt: 80,
        heading: -45.3,
        center: [106.540547, 29.564858],
        zoom: 17,
      });
      initData().then(data => {
        setData(data);
      });
      function initData() {
        // 返回promise 对象
        return fetch(
          'https://www.youbaobao.xyz/datav-res/examples/chongqing.json'
        )
          .then(res => res.json())
          .then(res => {
            var data = res;
            // 存放所有多边形的面
            var polygons = [];
            var len = data.length;
            for (var i = 0; i < len; i++) {
              // 对应的高度
              var line = data[i];
              var polygon = [];
              var pt = [line[1] * 512, line[2] * 512];
              for (var j = 3; j < line.length; j += 2) {
                // 经度
                pt[0] += line[j] / 100 / 2;
                // 维度
                pt[1] += line[j + 1] / 100 / 2;
                polygon.push([pt[0], pt[1]]);
              }
              polygons.push({
                geometry: {
                  type: 'Polygon',
                  coordinates: [polygon],
                },
                properties: {
                  height: line[0] / 2,
                },
              });
            }
            return polygons;
          });
      }
      function setData(data) {
        var view = new mapvgl.View({ map });
        var shaperLayer = new mapvgl.ShapeLayer({
          color: 'rgba(194, 147, 75, 0.8)',
          style: 'normal',
          opacity: 1.0, // 透明度
          riseTime: 2000, // 楼房升起动画
          enablePicked: true,
          riseTime: 1000,
          opacity: 0.3, // 透明度
          enablePicked: true, // 是否可以拾取
          selectedIndex: -1, // 选中项
          selectedColor: '#ee1111', // 选中项颜色
          autoSelect: true, // 根据鼠标位置来自动设置选中项
          onClick: e => {
            // 点击事件
            console.log(e);
          },
        });
        view.addLayer(shaperLayer);
        shaperLayer.setData(data);
      }
    </script>
  </body>
</html>
